<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>message</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/message.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script src="/js/underscore-noflect.js"></script>
	</head>
	<body class="message">
		<% include headerTeacher.ejs%>
		<div class="container">
			<div class="message-area">
				<ol class="breadcrumb">
					<li>
						<a href="#">当前位置：</a>
					</li>
					<li>
						<a href="/teacherIndex">主页</a>
					</li>
					<li className="active">相关通知
						<span class="badge">5</span>
					</li>
				</ol>
			</div>
			<div class="message-detail-area">
				<ul class="nav nav-tabs">
				  <li role="presentation" class="active">
				  	<a href="#tab1" data-toggle="tab">消息通知</a>
				  </li>
				  <li role="presentation">
				  	<a href="#tab2" data-toggle="tab">系统消息
						<span class="badgeinfo"></span>
					</a>
				  </li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane row-fluid active" id="tab1">
						<div class="list-group">
							<button type="button" class="list-group-item">暂时没有参加任何消息通知~</button>
						</div>
					</div>
					<div class="tab-pane row-fluid" id="tab2">
						<div class="list-group" id="informArea">

						</div>
					</div>
				</div>
				<nav aria-label="...">
					<ul class="pagination">
						<li class="disabled">
							<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
						</li>
						<li class="active">
							<a href="#">1 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#" >2 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">3<span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">4 <span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#">5<span class="sr-only">(current)</span></a>
						</li>
						<li class="disabled">
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
			<hr class="divider task-divider" />
			<div class="summary">
				<footer>
					<p class="pull-right">
						<a href="#top">回到顶部</a>
					</p>
					<p class="pull-left">&copy; 学生档案管理系统</p>
				</footer>
			</div>
		</div>

		<!--前端模板-->
		<script type="text/template" id="informTemplate">
			<button type="button" class="list-group-item">{{=content}}
				<!--<span class="badge">未读</span>-->
			</button>
		</script>
		<script type="text/javascript">
            var $informArea=$("#informArea");
            //得到模板函数
            var compiled=_.template($("#informTemplate").html());

            //ajax服务，获取信息
            $.ajax({
                "url":"/showInform",
                "type":"get",
                "success":function (result) {
                    //result是一个数组
//                console.log(Array.isArray(result));
//				console.log(result);
                    iterator(0);
                    //迭代器
                    //这里防止ajax异步，必须使用迭代器
                    function iterator(i) {
                        if (i == result.length) {
                            //在这里书写请求完毕之后做的事情
                            return;  //不用继续迭代了
                        }
                        console.log(result[i]);
                        //组装模板
                        var htmlstring = compiled(result[i]);
                        //添加DOM
                        $("#informArea").append($(htmlstring));
                        iterator(i + 1);
                    }
                }
            })
		</script>
	</body>
</html>
